<template>

     <!-- 区域滚动 -->
    <scroll class="content" ref="sc">
      <div v-for="(item,index) in cartList" :key="index" class="item">
        <div class="item-left">
          <checkIcon :ischecked="item.isChecked" class="item-icon" @click.native="handleSelectChnage(item.iid)"></checkIcon>
          <div class="item-image">
            <img :src="item.image" alt="">
          </div>
        </div>
        <div class="item-right">
            <div class="item-info">
              <div class="title">
                {{item.title}}
              </div>
              <div class="desc">
                {{item.desc}}
              </div>
            </div>
            <div class="price-count">
              <div class="price">
                {{item.price}}
              </div>
              <div class="count">
                X{{item.count}}
              </div>
            </div>

        </div>
      </div>

    </scroll>

</template>

<script>
  import {mapGetters} from 'vuex'
  import scroll from 'components/common/scroll/scroll'
  import checkIcon from 'components/common/checkedIcon/checkedIcon'
  export default {
    name:"cartList",
    data(){
      return {}
    },
    activated(){
     //当回到购物车页面时让better-scroll重新刷新
     this.$refs.sc.bs.refresh()
    },
    components:{
      scroll,
      checkIcon
    },
    computed:{
      ...mapGetters(['cartList'])
    },
    methods:{
      handleSelectChnage(iid){
        this.$store.commit('checkedChange',iid)
      }
    }
  }
</script>

<style scoped>
  .content{
    position:absolute;
    top:44px;
    bottom:80px;
    left:0;
    right:0;
    overflow:hidden;
  }
  .item{
    display:flex;
    padding:10px;
    border:1px solid #eee;


  }
  .item-left{
    width:130px;
    display:flex;
    text-align:center;
  }
  .item-icon{
    align-self:center;
    flex-shrink: 0;
  }
  .item-left .item-image{
    width:200px;
  }
  .item-left .item-image img{
    width:90px;
    height:120px;
    border-radius:8px;
    vertical-align:center;
  }
  .item-right{
    flex:1;
    display:flex;
    flex-direction: column;
    justify-content:space-between;

    width:0
  }
  .item-right .title{
    font-size:14px;
    font-weight:700;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .item-right .desc{
    font-size:12px;
    margin-top:10px ;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .price-count{
    display:flex;
    justify-content:space-between;
  }
</style>
